import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import layout from "@/components/element-layout/index.vue";

Vue.use(VueRouter);

/** 路由组件 */
const ROUTE_COMP = {
  template:
    '<div class="w-100 h-100"><transition name="move" mode="out-in"><router-view/></transition></div>',
};

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '',
    name: "layout",
    component: layout,
    redirect: "/home",
    children: [
      {
        path: "/home",
        name: "Home",
        component: Home,
        meta: {
          icon: "el-icon-s-home",
          title: "首页",
        },
      },
      {
        path: "/about",
        name: "About",
        component: () => import("../views/About.vue"),
        meta: {
          icon: "fa fa-question-circle",
          title: "关于",
        },
      },
      {
        path: "",
        name: "visula-tech",
        component: ROUTE_COMP,
        meta: {
          icon: "fa fa-eye",
          title: "可视化技术",
        },
        children: [
          {
            path: "/visula-tech/3d-three",
            name: "Three",
            component: () => import("@/views/3d-three/index.vue"),
            meta: {
              icon: "fa fa-cubes",
              title: "3d模型",
            },
          },
          {
            path: "/vis-view",
            name: "routeDetail",
            component: () => import("@/views/vis-view/index"),
            meta: {
              icon: "iconfont icon-AFSmyicon-",
              title: "vis拓扑图",
            },
          },
          {
            path: "/gaode-gis",
            name: "gaodeGis",
            component: () => import("@/views/gaode-gis/index"),
            meta: {
              icon: "el-icon-s-promotion",
              title: "高德地图开发",
            },
          },
          {
            path: "",
            name: "openlayers",
            component: ROUTE_COMP,
            meta: {
              icon: "el-icon-s-promotion",
              title: "openlayers开发",
            },
            children: [
              {
                path: '/openlayers/demo1',
                name: "openlayersDemo1",
                component: () => import("@/views/openlayers/index"),
                meta: {
                  icon: "fa fa-map-o",
                  title: "openlayers初识",
                }
              },
              {
                path: '/openlayers/demo2',
                name: "openlayersDemo2",
                component: () => import("@/views/openlayers/index2"),
                meta: {
                  icon: "fa fa-map-o",
                  title: "ol-demo练习",
                }
              }
            ]
          },
          {
            path: "",
            name: "echart",
            component: ROUTE_COMP, // 嵌套路由必须要有的，<router-view/>用来显示子组件
            meta: {
              icon: "iconfont icon-AFSshengchanqushi",
              title: "echart图表",
            },
            children: [
              {
                path: "/visula-tech/echart-map-drilldown",
                name: "echartMapDrilldown",
                component: () => import("@/views/echart-map-drilldown/index"),
                meta: {
                  icon: "fa fa-map-o",
                  title: "echart地图下钻",
                },
              },
              {
                path: "/echart-map",
                name: "echartMap",
                component: () => import("@/views/echart-map/index"),
                meta: {
                  icon: "fa fa-map-marker",
                  title: "echart飞线地图",
                },
              },
              {
                path: "/echart-line",
                name: "echartLine",
                component: () => import("@/views/echart/index"),
                meta: {
                  icon: "fa fa-bar-chart",
                  title: "echart折线图",
                },
              },
              {
                path: "/echart-bar",
                name: "echartBar",
                component: () => import("@/views/echart/echart-bar/index"),
                meta: {
                  icon: "fa fa-bar-chart",
                  title: "效率提升柱状图",
                },
              },
            ],
          },
          {
            path: "",
            name: "jsplumb",
            component: ROUTE_COMP, // 嵌套路由必须要有的，<router-view/>用来显示子组件
            meta: {
              icon: "iconfont icon-AFSpiliangyixian",
              title: "jsplumb插件",
            },
            children: [
              {
                path: "/jsplumb-flow",
                name: "jsplumbFlow",
                component: () => import("@/views/jsplumb-flow/index"),
                meta: {
                  icon: "fa fa-exchange",
                  title: "jsplumb流程图",
                },
              },
              {
                path: "/jsplumb-cluster",
                name: "jsplumbCluster",
                component: () => import("@/views/jsplumb-cluster/index"),
                meta: {
                  icon: "iconfont icon-AFSwangluoxitong",
                  title: "jsplumb集群",
                },
              },
              {
                path: "/link-cut",
                name: "linkCut",
                component: () => import("@/views/link-cut/index"),
                meta: {
                  icon: "fa fa-random",
                  title: "jsplumb链路切割",
                },
              },
            ],
          },
          {
            path: "",
            name: "d3",
            component: ROUTE_COMP,
            meta: {
              icon: "el-icon-s-promotion",
              title: "d3.js开发",
            },
            children: [
              {
                path: '/d3/demo1',
                name: "d3Demo1",
                component: () => import("@/views/d3/index"),
                meta: {
                  icon: "fa fa-map-o",
                  title: "d3初识",
                }
              }
            ]
          },
        ],
      },
      {
        path: "/device-port",
        name: "devicePort",
        component: () => import("@/views/device-port/index"),
        meta: {
          icon: "fa fa-th",
          title: "设备端口选择1",
        },
      },
      {
        path: "/device-port-2",
        name: "devicePort2",
        component: () => import("@/views/device-port-2/index"),
        meta: {
          icon: "fa fa-th",
          title: "设备端口选择2",
        },
      },
      {
        path: "/route-detail",
        name: "routeDetail",
        component: () => import("@/views/route-detail/index"),
        meta: {
          icon: "iconfont icon-AFSliuchengliebiao",
          title: "路由详情",
        },
      },
      {
        path: "/dynamic-table",
        name: "routeDetail",
        component: () => import("@/views/dynamic-table/index"),
        meta: {
          icon: "fa fa-table",
          title: "动态表格",
        },
      },
      {
        path: "/alarm",
        name: "alarm",
        component: () => import("@/views/alarm/index"),
        meta: {
          icon: "fa fa-file-picture-o",
          title: "告警图片下载",
        },
      }
    ],
  },
];

const router = new VueRouter({
  routes,
});

export default router;
